<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <link rel="stylesheet" href="../../framework/bootstrap/css/bootstrap-3.0.0.min.css"/>
    <link rel="stylesheet" href="../../framework/aui/aui-flex.css">
    <style>
        html, body {
            font-size: 14px;
            color: #313031;
        }

        #real-nav {
            position: fixed;
            height: 40px;
            line-height: 40px;
            width: 100%;
            background-color: #f4f4f4;
        }

        #content {
            position: absolute;
            top: 40px;
            bottom: 0;
            width: 100%;
        }

        #time-nav {
            position: absolute;
            left: 0;
            top: 0;
            width: 120px;
            height: 100%;
            background-color: #f4f4f4;
        }

        #real-box-nav {
            position: absolute;
            left: 120px;
            right: 0;
            height: 40px;
            line-height: 40px;
        }

        #real-box {
            position: absolute;
            left: 120px;
            top: 40px;
            right: 0;
            bottom: 0;
            overflow: auto;
        }

        .btn-outline {
            display: inline-block;
            height: 24px;
            line-height: 24px;
            border: 1px solid #39baff;
            border-radius: 12px;
            font-size: 12px;
            color: #39baff;
            padding: 0 12px;
            margin: 0 3px;
        }

        .btn-click:hover {
            cursor: pointer;
        }

        .btn-click.checked {
            background-color: #39baff;
            color: #fff;
        }

        .time-tile {
            width: 120px;
            text-align: center;
        }

        .real-item {
            width: 100%;
            overflow: hidden;
        }
        .real-title{
            float: left;
            width: 100%;
            background-color: #ddd;
            height: 40px;
            line-height: 40px;
            padding-left: 15px;
        }
        .time-item {
            height: 40px;
            line-height: 40px;
            text-align: center;
            color: #313031;
        }

        .plc-ul {
            float: left;
            width: 16.5%;
        }
        .plc-echarts{
            float: left;
            position: relative;
            width: 33.3333%;
            height: 295px;
            padding: 20px;
        }

        .plc-li {
            position: relative;
            width: 100%;
            height: 40px;
            line-height: 40px;
            font-size: 12px;
            text-align: center;
            overflow: hidden;
        }
        .plc-border{
            float: left;
            width: 100%;
            height: 2px;
            background-color: #ddd;
        }
        .echarts-title{
            height: 40px;
            line-height: 40px;
            text-align: center;
            font-size: 14px;
        }
        .echarts-box{
            position: absolute;
            top: 40px;
            bottom: 0;
            left: 0;
            right: 0;
        }
        .padded-l-15 {
            padding-left: 15px;
        }

        .padded-0-15 {
            padding: 0 15px;
        }

        .round {
            float: right;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background-color: red;
            margin-top: 12px;
        }

        .round.green {
            background-color: green;
        }
    </style>
    <title>Title</title>
</head>
<body id="body">
<div id="real-nav" class="aui-flex-col">
    <div class="time-tile">时间</div>
    <div class="aui-flex-auto padded-l-15">工况详情</div>
    <div class="">
        <div class="btn btn-link">工况记录</div>
        <div class="btn btn-link">返回上级</div>
    </div>
</div>
<div id="content">
    <div id="time-nav">
        <div class="time-item btn-click checked" onclick="getTimeData(this)">
            10:25:33:66'
        </div>
        <div class="time-item btn-click" onclick="getTimeData(this)">
            10:25:43:66'
        </div>
    </div>
    <div id="real-box-nav">
        <span class="padded-0-15">查看数据:</span>
        <div class="btn-outline btn-click" onclick="goMark(this)" data-index="1">一般故障</div>
        <div class="btn-outline btn-click" onclick="goMark(this)" data-index="2">起升变频器故障</div>
        <div class="btn-outline btn-click" onclick="goMark(this)" data-index="3">副起升变频器故障</div>
        <div class="btn-outline btn-click" onclick="goMark(this)" data-index="4">PLC输入端口</div>
        <div class="btn-outline btn-click" onclick="goMark(this)" data-index="5">PLC输出端口</div>
        <div class="btn-outline btn-click" onclick="goMark(this)" data-index="6">主起升变频器状态</div>
        <div class="btn-outline btn-click" onclick="goMark(this)" data-index="7">副起升变频器状态</div>
        <div class="btn-outline btn-click" onclick="goMark(this)" data-index="8">故障数据</div>
        <div class="btn-outline btn-click" onclick="goMark(this)" data-index="9">温度</div>
    </div>
    <div id="real-box">
        <div class="real-item" id="1">
            <div class="real-title">一般故障</div>
            <div class="plc-ul">
                <div class="plc-li">VB3000</div>
                <div class="plc-li">上升减速限位到
                    <div class="round"></div>
                </div>
                <div class="plc-li">上升停止限位到
                    <div class="round"></div>
                </div>
                <div class="plc-li">起升重锤限位动作
                    <div class="round"></div>
                </div>
                <div class="plc-li">下降减速限位到
                    <div class="round"></div>
                </div>
                <div class="plc-li">下降停止限位到
                    <div class="round"></div>
                </div>
                <div class="plc-li">小车手柄故障（包含大车）
                    <div class="round"></div>
                </div>
                <div class="plc-li">小车变频器故障
                    <div class="round"></div>
                </div>
                <div class="plc-li">小车前进减速限位到
                    <div class="round"></div>
                </div>
            </div>
            <div class="plc-ul">
                <div class="plc-li">VB3001</div>
                <div class="plc-li">起升接触器故障
                    <div class="round"></div>
                </div>
                <div class="plc-li">抱闸接触器故障
                    <div class="round"></div>
                </div>
                <div class="plc-li">起升手柄故障
                    <div class="round"></div>
                </div>
                <div class="plc-li">起升变频器故障
                    <div class="round"></div>
                </div>
                <div class="plc-li">相序错误
                    <div class="round"></div>
                </div>
                <div class="plc-li">电机超温故障
                    <div class="round"></div>
                </div>
                <div class="plc-li">重量百分之95预警
                    <div class="round"></div>
                </div>
                <div class="plc-li">重量百分之105报警
                    <div class="round"></div>
                </div>
            </div>
            <div class="plc-ul">
                <div class="plc-li">VB3002</div>
                <div class="plc-li">0</div>
                <div class="plc-li">1</div>
                <div class="plc-li">2</div>
                <div class="plc-li">3</div>
                <div class="plc-li">4</div>
                <div class="plc-li">5</div>
                <div class="plc-li">6</div>
                <div class="plc-li">7</div>
            </div>
            <div class="plc-ul">
                <div class="plc-li">VB3003</div>
                <div class="plc-li">小车前进停止限位到
                    <div class="round"></div>
                </div>
                <div class="plc-li">小车后退减速限位到
                    <div class="round"></div>
                </div>
                <div class="plc-li">小车后退停止限位到
                    <div class="round"></div>
                </div>
                <div class="plc-li">小车电机过热
                    <div class="round"></div>
                </div>
                <div class="plc-li">急停按下
                    <div class="round"></div>
                </div>
                <div class="plc-li">起升制动器故障
                    <div class="round"></div>
                </div>
                <div class="plc-li">待定
                    <div class="round"></div>
                </div>
                <div class="plc-li">待定
                    <div class="round"></div>
                </div>
            </div>
            <div class="plc-ul">
                <div class="plc-li">VB3010</div>
                <div class="plc-li">数据记录仪通讯故障
                    <div class="round"></div>
                </div>
                <div class="plc-li">主副起升变频器通讯故障
                    <div class="round"></div>
                </div>
                <div class="plc-li">小车变频器通讯故障
                    <div class="round"></div>
                </div>
                <div class="plc-li">安全监控系统通讯故障
                    <div class="round"></div>
                </div>
                <div class="plc-li">起升温度传感器通讯故障
                    <div class="round"></div>
                </div>
                <div class="plc-li">大车变频器通讯故障
                    <div class="round"></div>
                </div>
                <div class="plc-li">双小车主机通讯故障
                    <div class="round"></div>
                </div>
                <div class="plc-li">双小车从机通讯故障
                    <div class="round"></div>
                </div>
            </div>
            <div class="plc-ul">
                <div class="plc-li">VB3011</div>
                <div class="plc-li">0</div>
                <div class="plc-li">1</div>
                <div class="plc-li">2</div>
                <div class="plc-li">3</div>
                <div class="plc-li">4</div>
                <div class="plc-li">5</div>
                <div class="plc-li">6</div>
                <div class="plc-li">7</div>
            </div>
        </div>
        <div class="real-item" id="2">
            <div class="real-title">起升变频器故障</div>
            <div class="plc-ul">
                <div class="plc-li">VB3004</div>
                <div class="plc-li">电机超速故障
                    <div class="round"></div>
                </div>
                <div class="plc-li">软件过压故障
                    <div class="round"></div>
                </div>
                <div class="plc-li">硬件过压故障
                    <div class="round"></div>
                </div>
                <div class="plc-li">欠压故障
                    <div class="round"></div>
                </div>
                <div class="plc-li">电流检测故障
                    <div class="round"></div>
                </div>
                <div class="plc-li">电压检测故障
                    <div class="round"></div>
                </div>
                <div class="plc-li">软件过流故障
                    <div class="round"></div>
                </div>
                <div class="plc-li">硬件过流故障
                    <div class="round"></div>
                </div>
            </div>
            <div class="plc-ul">
                <div class="plc-li">VB3005</div>
                <div class="plc-li">功率单元故障
                    <div class="round"></div>
                </div>
                <div class="plc-li">输入缺相故障
                    <div class="round"></div>
                </div>
                <div class="plc-li">输出缺相故障
                    <div class="round"></div>
                </div>
                <div class="plc-li">485通信故障
                    <div class="round"></div>
                </div>
                <div class="plc-li">扩展通信故障
                    <div class="round"></div>
                </div>
                <div class="plc-li">编码器故障
                    <div class="round"></div>
                </div>
                <div class="plc-li">存储器故障
                    <div class="round"></div>
                </div>
                <div class="plc-li">变频器过载故障
                    <div class="round"></div>
                </div>
            </div>
            <div class="plc-ul">
                <div class="plc-li">VB3006</div>
                <div class="plc-li">电机过载故障
                    <div class="round"></div>
                </div>
                <div class="plc-li">变频器过热故障
                    <div class="round"></div>
                </div>
                <div class="plc-li">电机过热故障
                    <div class="round"></div>
                </div>
                <div class="plc-li">电机对地短路故障
                    <div class="round"></div>
                </div>
                <div class="plc-li">电机自学习故障
                    <div class="round"></div>
                </div>
                <div class="plc-li">接触器故障
                    <div class="round"></div>
                </div>
                <div class="plc-li">加速过电流故障
                    <div class="round"></div>
                </div>
                <div class="plc-li">减速过电流故障
                    <div class="round"></div>
                </div>
            </div>
            <div class="plc-ul">
                <div class="plc-li">VB3007</div>
                <div class="plc-li">恒速过电流故障
                    <div class="round"></div>
                </div>
                <div class="plc-li">加速过电压故障
                    <div class="round"></div>
                </div>
                <div class="plc-li">减速过电压故障
                    <div class="round"></div>
                </div>
                <div class="plc-li">恒速过电压故障
                    <div class="round"></div>
                </div>
                <div class="plc-li">逐波限流故障
                    <div class="round"></div>
                </div>
                <div class="plc-li">速度偏差过大故障
                    <div class="round"></div>
                </div>
                <div class="plc-li">用户自定义故障1
                    <div class="round"></div>
                </div>
                <div class="plc-li">用户自定义故障2
                    <div class="round"></div>
                </div>
            </div>
        </div>
        <div class="real-item" id="3">
            <div class="real-title">副起升变频器故障</div>
            <div class="plc-ul">
                <div class="plc-li">VB3012</div>
                <div class="plc-li">0</div>
                <div class="plc-li">1</div>
                <div class="plc-li">2</div>
                <div class="plc-li">3</div>
                <div class="plc-li">4</div>
                <div class="plc-li">5</div>
                <div class="plc-li">6</div>
                <div class="plc-li">7</div>
            </div>
            <div class="plc-ul">
                <div class="plc-li">VB3013</div>
                <div class="plc-li">0</div>
                <div class="plc-li">1</div>
                <div class="plc-li">2</div>
                <div class="plc-li">3</div>
                <div class="plc-li">4</div>
                <div class="plc-li">5</div>
                <div class="plc-li">6</div>
                <div class="plc-li">7</div>
            </div>
            <div class="plc-ul">
                <div class="plc-li">VB3014</div>
                <div class="plc-li">0</div>
                <div class="plc-li">1</div>
                <div class="plc-li">2</div>
                <div class="plc-li">3</div>
                <div class="plc-li">4</div>
                <div class="plc-li">5</div>
                <div class="plc-li">6</div>
                <div class="plc-li">7</div>
            </div>
            <div class="plc-ul">
                <div class="plc-li">VB3015</div>
                <div class="plc-li">0</div>
                <div class="plc-li">1</div>
                <div class="plc-li">2</div>
                <div class="plc-li">3</div>
                <div class="plc-li">4</div>
                <div class="plc-li">5</div>
                <div class="plc-li">6</div>
                <div class="plc-li">7</div>
            </div>
        </div>
        <div class="real-item" id="4">
            <div class="real-title">PLC输入端口信息</div>
            <div class="plc-ul">
                <div class="plc-li">VB3016</div>
                <div class="plc-li">I0.0</div>
                <div class="plc-li">I0.1</div>
                <div class="plc-li">I0.2</div>
                <div class="plc-li">I0.3</div>
                <div class="plc-li">I0.4</div>
                <div class="plc-li">I0.5</div>
                <div class="plc-li">I0.6</div>
                <div class="plc-li">I0.7</div>
            </div>
            <div class="plc-ul">
                <div class="plc-li">VB3017</div>
                <div class="plc-li">I1.0</div>
                <div class="plc-li">I1.1</div>
                <div class="plc-li">I1.2</div>
                <div class="plc-li">I1.3</div>
                <div class="plc-li">I1.4</div>
                <div class="plc-li">I1.5</div>
                <div class="plc-li">I1.6</div>
                <div class="plc-li">I1.7</div>
            </div>
            <div class="plc-ul">
                <div class="plc-li">VB3018</div>
                <div class="plc-li">I2.0</div>
                <div class="plc-li">I2.1</div>
                <div class="plc-li">I2.2</div>
                <div class="plc-li">I2.3</div>
                <div class="plc-li">I2.4</div>
                <div class="plc-li">I2.5</div>
                <div class="plc-li">I2.6</div>
                <div class="plc-li">I2.7</div>
            </div>
            <div class="plc-ul">
                <div class="plc-li">VB3019</div>
                <div class="plc-li">I3.0</div>
                <div class="plc-li">I3.1</div>
                <div class="plc-li">I3.2</div>
                <div class="plc-li">I3.3</div>
                <div class="plc-li">I3.4</div>
                <div class="plc-li">I3.5</div>
                <div class="plc-li">I3.6</div>
                <div class="plc-li">I3.7</div>
            </div>
            <div class="plc-ul">
                <div class="plc-li">VB3020</div>
                <div class="plc-li">I4.0</div>
                <div class="plc-li">I4.1</div>
                <div class="plc-li">I4.2</div>
                <div class="plc-li">I4.3</div>
                <div class="plc-li">I4.4</div>
                <div class="plc-li">I4.5</div>
                <div class="plc-li">I4.6</div>
                <div class="plc-li">I4.7</div>
            </div>
            <div class="plc-ul">
                <div class="plc-li">VB3021</div>
                <div class="plc-li">I5.0</div>
                <div class="plc-li">I5.1</div>
                <div class="plc-li">I5.2</div>
                <div class="plc-li">I5.3</div>
                <div class="plc-li">I5.4</div>
                <div class="plc-li">I5.5</div>
                <div class="plc-li">I5.6</div>
                <div class="plc-li">I5.7</div>
            </div>
        </div>
        <div class="real-item" id="5">
            <div class="real-title">PLC输出端口信息</div>
            <div class="plc-ul">
                <div class="plc-li">VB3022</div>
                <div class="plc-li">I6.0</div>
                <div class="plc-li">I6.1</div>
                <div class="plc-li">I6.2</div>
                <div class="plc-li">I6.3</div>
                <div class="plc-li">I6.4</div>
                <div class="plc-li">I6.5</div>
                <div class="plc-li">I6.6</div>
                <div class="plc-li">I6.7</div>
            </div>
            <div class="plc-ul">
                <div class="plc-li">VB3023</div>
                <div class="plc-li">I7.0</div>
                <div class="plc-li">I7.1</div>
                <div class="plc-li">I7.2</div>
                <div class="plc-li">I7.3</div>
                <div class="plc-li">I7.4</div>
                <div class="plc-li">I7.5</div>
                <div class="plc-li">I7.6</div>
                <div class="plc-li">I7.7</div>
            </div>
            <div class="plc-ul">
                <div class="plc-li">VB3024</div>
                <div class="plc-li">I8.0</div>
                <div class="plc-li">I8.1</div>
                <div class="plc-li">I8.2</div>
                <div class="plc-li">I8.3</div>
                <div class="plc-li">I8.4</div>
                <div class="plc-li">I8.5</div>
                <div class="plc-li">I8.6</div>
                <div class="plc-li">I8.7</div>
            </div>
            <div class="plc-ul">
                <div class="plc-li">VB3025</div>
                <div class="plc-li">Q0.0</div>
                <div class="plc-li">Q0.1</div>
                <div class="plc-li">Q0.2</div>
                <div class="plc-li">Q0.3</div>
                <div class="plc-li">Q0.4</div>
                <div class="plc-li">Q0.5</div>
                <div class="plc-li">Q0.6</div>
                <div class="plc-li">Q0.7</div>
            </div>
            <div class="plc-ul">
                <div class="plc-li">VB3026</div>
                <div class="plc-li">Q1.0</div>
                <div class="plc-li">Q1.1</div>
                <div class="plc-li">Q1.2</div>
                <div class="plc-li">Q1.3</div>
                <div class="plc-li">Q1.4</div>
                <div class="plc-li">Q1.5</div>
                <div class="plc-li">Q1.6</div>
                <div class="plc-li">Q1.7</div>
            </div>
            <div class="plc-ul">
                <div class="plc-li">VB3027</div>
                <div class="plc-li">Q2.0</div>
                <div class="plc-li">Q2.1</div>
                <div class="plc-li">Q2.2</div>
                <div class="plc-li">Q2.3</div>
                <div class="plc-li">Q2.4</div>
                <div class="plc-li">Q2.5</div>
                <div class="plc-li">Q2.6</div>
                <div class="plc-li">Q2.7</div>
            </div>
            <div class="plc-border"></div>
            <div class="plc-ul">
                <div class="plc-li">VB3028</div>
                <div class="plc-li">Q3.0</div>
                <div class="plc-li">Q3.1</div>
                <div class="plc-li">Q3.2</div>
                <div class="plc-li">Q3.3</div>
                <div class="plc-li">Q3.4</div>
                <div class="plc-li">Q3.5</div>
                <div class="plc-li">Q3.6</div>
                <div class="plc-li">Q3.7</div>
            </div>
            <div class="plc-ul">
                <div class="plc-li">VB3029</div>
                <div class="plc-li">0</div>
                <div class="plc-li">1</div>
                <div class="plc-li">2</div>
                <div class="plc-li">3</div>
                <div class="plc-li">4</div>
                <div class="plc-li">5</div>
                <div class="plc-li">6</div>
                <div class="plc-li">7</div>
            </div>
        </div>
        <div class="real-item" id="6">
            <div class="real-title">副起升变频器状态</div>
            <div class="plc-echarts">
                <div class="echarts-title">VW3032</div>
                <div id="vw3030" class="echarts-box"></div>
            </div>
            <div class="plc-echarts">
                <div class="echarts-title">VW3032</div>
                <div id="vw3032" class="echarts-box"></div>
            </div>
            <div class="plc-echarts">
                <div class="echarts-title">VW3032</div>
                <div id="vw3034" class="echarts-box"></div>
            </div>
            <div class="plc-echarts">
                <div class="echarts-title">VW3032</div>
                <div id="vw3036" class="echarts-box"></div>
            </div>
            <div class="plc-echarts">
                <div class="echarts-title">VW3032</div>
                <div id="vw3038" class="echarts-box"></div>
            </div>
        </div>
        <div class="real-item" id="7">
            <div class="real-title">主起升变频器状态</div>
            <div class="plc-echarts">
                <div class="echarts-title">VW3032</div>
                <div id="vw3050" class="echarts-box"></div>
            </div>
            <div class="plc-echarts">
                <div class="echarts-title">VW3032</div>
                <div id="vw3048" class="echarts-box"></div>
            </div>
            <div class="plc-echarts">
                <div class="echarts-title">VW3032</div>
                <div id="vw3052" class="echarts-box"></div>
            </div>
            <div class="plc-echarts">
                <div class="echarts-title">VW3032</div>
                <div id="vw3056" class="echarts-box"></div>
            </div>
            <div class="plc-echarts">
                <div class="echarts-title">VW3032</div>
                <div id="vw3054" class="echarts-box"></div>
            </div>
        </div>
        <div class="real-item" id="8">
            <div class="real-title">故障数据</div>
            <div class="plc-ul">
                <div class="plc-li">VW3040</div>
                <div class="plc-li">主起升变频器故障数据:50</div>
            </div>
            <div class="plc-ul">
                <div class="plc-li">VW3042</div>
                <div class="plc-li">主起升变频器故障数据:50</div>
            </div>
            <div class="plc-ul">
                <div class="plc-li">VW3058</div>
                <div class="plc-li">副起升变频器故障数据:50</div>
            </div>
            <div class="plc-ul">
                <div class="plc-li">VW3060</div>
                <div class="plc-li">副起升变频器故障数据:50</div>
            </div>
            <div class="plc-ul">
                <div class="plc-li">VW3044</div>
                <div class="plc-li">小车变频器故障数据:50</div>
            </div>
            <div class="plc-ul">
                <div class="plc-li">VW3046</div>
                <div class="plc-li">大车变频器故障数据:50</div>
            </div>
        </div>
        <div class="real-item" id="9">
            <div class="real-title">温度</div>
            <div class="plc-ul">
                <div class="plc-li">VB3008</div>
                <div class="plc-li">主起升电机温度:50</div>
            </div>
            <div class="plc-ul">
                <div class="plc-li">VB3008</div>
                <div class="plc-li">副起升电机温度:50</div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
<script src="../../framework/jquery/jquery-3.1.1.min.js"></script>
<script src="../../framework/echars/3.15/echarts-gauge.min.js"></script>
<script>
    var $root = $('#real-box');
    fillData();
    function goMark(el) {
        var $this = $(el);
        var index = $this.data('index');
        var scrollTop = $root.scrollTop();
        var _scrollTop = $('#' + index).position().top;
        if ($this.hasClass('checked'))return false;
        $('.btn-outline').removeClass('checked');
        $this.addClass('checked');
        $root.animate({
            scrollTop: scrollTop + _scrollTop
        }, 500);
    }
    function getTimeData(el) {
        var $this = $(el);
//        var index=$this.data('index');
        if ($this.hasClass('checked'))return false;
        $('.time-item').removeClass('checked');
        $this.addClass('checked');
        fillData();
    }
    function initEcharts(ele){
        var myChart = echarts.init(document.getElementById(ele));
        // 指定图表的配置项和数据
        var option = {
            toolbox: {
                feature: {
                    restore: {},
                    saveAsImage: {}
                }
            },
            series: [
                {
                    type: 'gauge',
                    min:0,
                    max:75,
                    axisLine:{
                        lineStyle:{
                            color:[[1,'#ADD9E6']],
                            width:20
                        }
                    },
                    splitLine:{
                        length:20
                    },
                    axisLabel:{
                        distance:2,
                        textStyle:{
                            fontSize:10
                        }
                    },
                    title:{
                        offsetCenter:[0,'90%'],
                    },
                    detail: {formatter:'{value}%'},
                    data: [{value: 50, name: '完成率'}]
                }
            ]
        };
        myChart.setOption(option);
    }
    function fillData(){
        initEcharts('vw3030');
        initEcharts('vw3032');
        initEcharts('vw3034');
        initEcharts('vw3036');
        initEcharts('vw3038');
        initEcharts('vw3048');
        initEcharts('vw3050');
        initEcharts('vw3052');
        initEcharts('vw3054');
        initEcharts('vw3056');
    }
</script>